<!-- 谋徐晃断粮，选择不同项则谋弈成功 -->
<template>
  <div class="playA" v-if="playA === 0">
    <h4>徐晃请选择:</h4>
    <van-button @click="playA = 1"
      >围城断粮：对他使用兵粮寸断或摸他牌</van-button
    >
    <van-button @click="playA = 2">擂鼓进军：对他使用决斗</van-button>
  </div>
  <div class="playB" v-else-if="playB === 0">
    <h4>对方请选择:</h4>
    <van-button @click="playB = 1">围城断粮：防止被兵</van-button>
    <van-button @click="playB = 2">擂鼓进军：防止被决斗</van-button>
  </div>
  <div v-else>
    <h4>
      {{
        playA !== playB
          ? playA === 1
            ? "谋弈成功！你将一张牌堆顶的牌当做【兵粮寸断】对其使用且无距离限制。若其判定区已有【兵粮寸断】，则改为获得其一张牌。"
            : "谋弈成功！你视为对其使用一张【决斗】"
          : "谋弈失败"
      }}
    </h4>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const playA = ref<number>(0);
const playB = ref<number>(0);
</script>

<style scoped lang="scss">
div {
  padding: 0 20rem;
}
.playA,
.playB {
  .van-button {
    width: 100%;
  }
}
</style>
